<template>
  <div>
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    />

    <ul v-if="value">
      <li v-for="data in computedList" :key="data.cinemaId">
        <div class="left">
          <div class="cinema_name">{{ data.name }}</div>
          <div class="cinema_text">{{ data.address }}</div>
        </div>

        <div class="right cinema_name">
          <div style="color:red;">￥{{ data.lowPrice/100 }}起</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import obj from '@/util/mixinObj'

export default {
  mixins: [obj],
  data () {
    return {
      value: ''
    }
  },

  computed: {
    computedList () {
      const UpValue = this.value.toUpperCase()
      return this.$store.state.cinemaList.filter(item => {
        return item.name.toUpperCase().includes(UpValue) || item.address.toUpperCase().includes(UpValue)
      })
    }
  },

  methods: {
    onSearch () {

    },

    onCancel () {
      this.$router.back()
    }
  },

  mounted () {
    if (this.$store.state.cinemaList.length === 0) { // 如果没有数据就发起请求
      this.$store.dispatch('getCinemaData', this.$store.state.cityId)
    // 虽然有数据，但是数据里的cityId与this.$store.state.cityId不同，也要发起请求。
    // 还有一种方法，就是在触发@click-left="handleLeft"这个事件时将this.$store.state.cinemaList清空
    // 但是清空this.$store.state.cinemaList时，仍然需要this.$store.commit这个方法，
    // 而且有时候触发@click-left="handleLeft"这个事件并不一定更换地址名称，
    // 如果不更换地址名称那么缓存数据就是仍然有用的，所以这个方法更有利于利用缓存
    } else if (this.$store.state.cinemaList[0].cityId !== this.$store.state.cityId) {
      this.$store.dispatch('getCinemaData', this.$store.state.cityId)
    } else {
      console.log('缓存')
    }
  }
}
</script>

<style lang="scss" scoped>
li {
  padding: 15px;

  display: flex;
  justify-content: space-between;
  .left {
    width: 212px;
  }

  .cinema_name {
    font-size: 15px;
  }

  .cinema_text {
    color: #797d82;
    font-size: 12px;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
